<template>
	<view>
		<view class="container">
			<view class="cT">分类</view>
			<view class="content">
				<view class="contentList">
					<view class="contentItem" :class="{active: cateIndex === index}" v-for="(cate,index) in cateList" :key="cate._id" @click="cateIndex = index">{{cate.name}}</view>
				</view>
				<view class="contentBox" id="main">
					<view class="contentBoxItem" v-for="cateChildren in cateChilrenList" :key="cateChildren._id" @click="toProduct(cateChildren)">
						<image :src="cateChildren.img"></image>
						<text>{{cateChildren.name}}</text>
					</view>
				</view>
			</view>
			<tarbar :current="1"></tarbar>
		</view>
	</view>
</template>

<script setup>
	import {
		onShow,
		onLoad,
		onReady
	} from "@dcloudio/uni-app"
	import tarbar from '@/components/tarbar/tarbar.vue'
	import { home } from '@/api'
	import { reactive, ref, computed, watch } from 'vue'
	
	const cateList = ref([])
	const cateIndex = ref(0)
	// 获取二级菜单
	const cateChilrenList = computed(() => {
		return cateList.value[cateIndex.value]?.children || []
	})
	watch(cateIndex, (value)=> {
		uni.pageScrollTo({
			scrollTop:0
		})
	})
	
	// 去商品分类
	function toProduct(item) {
		let cate_id = item._id
		let title = item.name
		let is_top = 0
		uni.navigateTo({
			url: `/pages/product/list?cate_id=${cate_id}&title=${title}&is_top=${is_top}`
		})
	}
	
	onLoad(()=> {
		getCateList()
	})
	
	// 不用自带的tabbar
	onShow(() => {
		uni.hideTabBar({
			animation: false
		})
	})
	
	//获取分类
	function getCateList() {
		home.reqCate().then(res => {
			if(res.code === 1) {
				cateList.value = res.data
			}
		})
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		padding-top: 50rpx;
		padding-bottom: 100rpx;
		position: relative;
		background-color: #fff;
		.cT {
			height: 80rpx;
			line-height: 80rpx;
			background-color: #ffffff;
			text-align: center;
		}

		.content {
			display: flex;

			.contentList {
				width: 180rpx;
				height: calc(100vh - 230rpx);
				background-color: #ffffff;
				overflow: scroll;

				.contentItem {
					font-size: 25rpx;
					text-align: center;
					padding: 30rpx 0;
					border-bottom: 1px solid #f5f5f5;

					&.active {
						background-color: #f5f5f5;
						color: #fbda3a;
						position: relative;

						&::before {
							content: '';
							position: absolute;
							top: 50%;
							left: 0;
							transform: translateY(-50%);
							background-color: #fbda3a;
							width: 8rpx;
							height: 30rpx;
							border-top-right-radius: 15rpx;
							border-bottom-right-radius: 15rpx;
						}
					}
				}
			}

			.contentBox {
				height: calc(100vh - 230rpx);
				overflow: scroll;
				flex: 1;
				margin-left: 15rpx;
				background-color: #fff;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				align-content: flex-start;
				.contentBoxItem {
					width: 32%;
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-bottom: 15rpx;

					image {
						width: 80%;
						height: 150rpx;
					}

					text {
						margin-top: 15rpx;
						font-size: 25rpx;
					}
				}

				&::after {
					width: 32%;
					content: '';
					display: block;
				}
			}
		}
	}
</style>
